<template>
  <div class='editCon'>
    <div class='editStyle'>
      <Editor
          v-if='editContent'
          v-model='valueHtml'
          :defaultConfig='editorConfig'
          @onCreated='handleCreated'
          mode='default'
      />
      <el-empty v-else description='暂无更多资料...' :image-size='200'/>
    </div>
    <div class='bigfile' v-if='otherBigFiles.length'>
      <div class='title'>
        <span class='iconfont icon-integral1'></span>附件下载({{
          otherBigFiles.length
        }}个)
      </div>
      <div class='con'>
        <a
            href='javascript:void(0)'
            @click='downLoadFile(item)'
            class='item'
            v-for='(item, index) in otherBigFiles'
            :key='index'
        >
          <template v-if='item!=null'>

            <div class='icon'>
              <svg class='coloricon' aria-hidden='true'>
                <use :xlink:href="'#' + getFileIcon(item.customName)"></use>
              </svg>
            </div>
            <div class='text'>
              <div class='name'>{{ giveEllipsisStr(item.customName, 30) }}</div>
              <div class='size'>
                文件大小：{{
                  item.byteCount ? filterSize(item.byteCount) : '未知'
                }}
              </div>
            </div>

          </template>

          <template v-else>
            <div style='color:#F56C6C'>
              资料已丢失~~
            </div>
          </template>


        </a>
      </div>
    </div>
  </div>
</template>

<script setup>

import {
  getFileIcon,
  filterSize,
  giveEllipsisStr,
  downLoadFile,
} from '@/utils/common';
import {Editor} from '@wangeditor/editor-for-vue';


const props = defineProps({
  editContent: {
    type: String,
    default: '',
  },
  otherBigFiles: {
    type: Array,
    default: () => [],
  },
  appStr: {
    type: String,
    default: '',
  },
});

const editorRef = shallowRef()

const valueHtml = ref(props.editContent)

watch(() => props.editContent, (data = '') => {
  valueHtml.value = data
})

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {},
  readOnly: true
}

onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor
}


</script>


<style lang='scss' scoped>
.bigfile {
  margin-top: 10px;

  .title {
    line-height: 35px;
    background: #e0ecf9;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: #444;

    .iconfont {
      font-size: 25px;
      margin-right: 5px;
    }
  }

  .con {
    min-height: 100px;
    padding: 20px;
    border: 1px solid #e0ecf9;
    display: flex;
    flex-wrap: wrap;

    .item {
      display: flex;
      align-items: center;
      margin-right: 30px;
      margin-top: 15px;
      margin-bottom: 15px;

      &:hover {
        .name {
          color: #4395ff;
        }
      }

      .icon {
        padding-right: 5px;

        .coloricon {
          font-size: 44px;
        }
      }

      .text {
        color: #333;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .name {
          font-size: 16px;
        }

        .size {
          font-size: 12px;
          color: #888;
        }
      }
    }
  }
}

.editStyle {
  width: 100%;

  :deep(video) {
    max-width: 100%;
    margin: 10px 0;
  }

  :deep(img) {
    max-width: 100%;
    margin: 10px 0;
  }

  :deep(*) {
    line-height: 1.7em;
  }
}

</style>
